<div class="pac-page-header">
  <div class="pac-page-title">{{ 'PAC.Copilot.DigitalXpert' | translate: {Default: 'Digital Xpert'} }}</div>
      
  <nav mat-tab-nav-bar class="pac-tab-nav-bar" displayDensity="cosy" color="accent" mat-align-tabs="start" mat-stretch-tabs="false" disableRipple
    [tabPanel]="tabPanel"
  >
    <span mat-tab-link [routerLink]="['./roles']"
      routerLinkActive #rla1="routerLinkActive"
      [active]="rla1.isActive"
    >
      <mat-icon fontSet="material-icons-outlined">engineering</mat-icon>
      {{ 'PAC.KEY_WORDS.Roles' | translate: {Default: "Roles"} }}
    </span>

    <span mat-tab-link [routerLink]="['./toolsets']"
      routerLinkActive #rla2="routerLinkActive"
      [active]="rla2.isActive"
    >
      <mat-icon fontSet="material-icons-outlined">construction</mat-icon>
      {{ 'PAC.KEY_WORDS.Toolsets' | translate: {Default: "Toolsets"} }}
    </span>
  </nav>
</div>

<mat-divider></mat-divider>
  
<mat-tab-nav-panel #tabPanel class="pac-page-body flex flex-col items-center"
  [@routeAnimations]="o.isActivated && o.activatedRoute.routeConfig.path">
  <router-outlet #o="outlet"></router-outlet>
</mat-tab-nav-panel>
